<template>
  <div class="systemManage">
    <h-header></h-header>
    <div class="content">
      <div class="sidebar">
        <div class=" main-title">
          <i class="iconfont icon-4-copy"></i>
          <span class="font-18 text">菜单</span>
        </div>
        <div class="menu">
          <!-- <div class="menu-item">
            <p class="font-16 title" :class="{choosed:this.change=='map1'}" @click="changetab('map1')">用户管理</p>
            <p class="font-16 title" :class="{choosed:this.change=='map2'}" @click="changetab('map2')">机构管理</p>
            <p class="font-16 title" :class="{choosed:this.change=='map3'}" @click="changetab('map3')">代码管理</p>
            <p class="font-16 title" :class="{choosed:this.change=='map4'}" @click="changetab('map4')">角色管理</p>
          </div> -->
          <div class="menu-item" v-for="item in sideMenu" :key="item.id">
            <p class="font-16 title" @click="changetab(item.hash.funcname)" :class="{choosed:change==item.hash.funcname}">{{item.hash.funcname}}</p>
          </div>
        </div>
      </div>
      <div class="main-content">
        <div class="search_h clearfix">
          <p>
            <a href="#" onClick="javascript:history.back(-1)">系统管理</a>
            <span>&gt;</span>
            <span>{{showTitle}}</span>
          </p>
        </div>
        <div v-show="this.change=='用户列表'">
          <div class="search_c" v-show="showUser">
            <p class="billlist">
              <span>姓名：<input type="text" v-model="newUserName"></span>
              <span>机构：
                <select name="" class="selectC" v-model="newUserJigou">
                  <option v-for="item in jigouList" :key="item.id" :value="item.hash.orgid">{{(item.hash.orgname).replace(/;/g, "&nbsp;")}}</option>
                </select>
              </span>
              <span>电话：<input type="text" v-model="newUserTel"></span>
            </p>
            <div class="search" @click="getUserList('1')">搜索</div>
          </div>
          <div class="cont" v-show="showUser">
            <div class="btn-group">
              <span class="btn" @click="goAddUser">添加新用户</span>
            </div>
            <table width="95%">
              <thead>
                <tr>
                  <th>工号</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
                  <th>邮箱</th>
                  <th>电话</th>
                  <th>所在机构</th>
                  <th>角色</th>
                  <th width="320px">状态</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in pages[num-1]" :key="item.id">
                  <td>{{item.hash.userid}}</td>
                  <td>{{item.hash.username}}</td>
                  <td>{{item.hash.sex}}</td>
                  <td>{{item.hash.age}}</td>
                  <td>{{item.hash.email}}</td>
                  <td>{{item.hash.telephone}}</td>
                  <td>{{item.hash.orgname}}</td>
                  <td>{{item.hash.rname}}</td>
                  <td>
                    <span @click="modifyUserInfo(item.hash.pid)">修改信息</span>
                    <span>查看员工</span>
                    <span>初始化密码</span>
                    <el-button type="text" @click="deleteUserItem(index,item.hash.pid)">删除</el-button>
                    <span @click="changeUserRole(item.hash.pid)">角色</span>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="pagination-wrapper">
              <pagination :groups="groups" :pages="pages" :current.sync="group" @navpage="pageListView"
                @navgroup="groupListView"
                ref="pagi"
              ></pagination>
              <div class="desc">
                <span>当前是第<i v-text="group"></i>组，共<i v-text="groups"></i>组，</span>
                <span>当前是第<i v-text="num"></i>页，共<i v-text="pages.length"></i>页</span>
              </div>
            </div>
          </div>
          <div class="addInfo" v-show="showAdduser">
            <div class="title"><span @click="goBackUser">用户管理</span>——添加/修改新用户</div>
            <table width="95%">
              <tbody>
                <tr>
                  <td>工号:</td>
                  <td><input type="text" v-model="newUserId"></td>
                  <td>员工姓名:</td>
                  <td><input type="text" v-model="newUserName"></td>
                </tr>
                <tr>
                  <td>性别:</td>
                  <td>
                    <input type="radio" id="one" value="男" :checked ="male"
                      v-model="newUserSex"
                    >
                    <label for="one">男</label>
                    <input type="radio" id="two" value="女" :checked ="female"
                      v-model="newUserSex"
                    >
                    <label for="two">女</label>
                  </td>
                  <td>年龄:</td>
                  <td><input type="text" v-model="newUserAge"></td>
                </tr>
                <tr>
                  <td>所在机构:</td>
                  <td>
                    <select v-model="newUserJigou">
                      <option selected disabled :value="newUserJigou">{{newUserJigou}}</option>
                      <option v-for="item in jigouList" :key="item.id" :value="item.hash.orgid">
                        {{(item.hash.orgname).replace(/;/g, "&nbsp;")}}
                      </option>
                    </select>
                  </td>
                  <td>职务:</td>
                  <td>
                    <input type="text" v-model="newUserPosition">
                  </td>
                </tr>
                <tr>
                  <td>邮箱:</td>
                  <td><input type="text" v-model="newUserEmail"></td>
                  <td>电话:</td>
                  <td><input type="text" v-model="newUserTel"></td>
                </tr>
                <tr>
                  <td>设置密码:</td>
                  <td colspan="3"><input type="text" v-model="newUserPwd"></td>
                </tr>
                <tr>
                  <td colspan="4" @click="addNewUser" v-show="showSubmit"><span>提交</span></td>
                  <td colspan="4" @click="modifyUserSubmit(nowPid)" v-show="showXiugaiSubmit"><span>提交</span></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="show-role" v-show="showUserRole">
            <div class="title"><span @click="goBackUser">用户管理</span>——修改用户角色</div>
            <div class="title">您修改的是【{{newUserName}}】的使用权限!</div>
            <div class="list">
              <span
                v-for="(item, index) in userRoleList"
                :key="item.id"
              >
                <input type="checkbox" :id="index" :value="item.hash.rid"
                  v-model="item.hash.pid" @click="submitUserRole(nowPid, item.hash.rid)"
                >
                <label :for="index">{{item.hash.rname}}</label>
              </span>
            </div>
            <el-button type="primary">修改</el-button>
          </div>
        </div>
        <div v-show="this.change=='机构列表'">
          <!-- 机构首页 -->
          <div class="cont" v-show="showArea">
            <div class="btn-group">
              <span class="btn" @click="addJigouClick">增加同级机构</span>
              <span class="text">上级结构：{{nowOrgname}}</span>
            </div>
            <table width="95%">
              <thead>
                <tr>
                  <th>编号</th>
                  <th>名称</th>
                  <th>备注</th>
                  <th width="320px">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in jigouFirstList" :key="item.id">
                  <td>{{item.hash.orgid}}</td>
                  <td>{{item.hash.orgname}}</td>
                  <td>备注内容</td>
                  <td>
                    <span @click="getSecondJigouList(item.hash.orgid, item.hash.orgname)">查看下级代码</span>
                    <span @click="modifyFirstJigouInfo(item.hash.orgid)">修改</span>
                    <el-button type="text" @click="deleteAreaItem(item.hash.orgid)">删除</el-button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 增加机构 -->
          <div class="addInfo" v-show="showAddarea">
            <div class="title"><span @click="gojigouList">机构管理</span>——新增机构</div>
            <table width="95%">
              <tbody>
                <tr>
                  <td>上级机构:</td>
                  <td><input type="text" :value="nowOrgname" readOnly></td>
                </tr>
                <tr>
                  <td>机构名称:</td>
                  <td><input type="text" v-model="newFirstJigou"></td>
                </tr>
                <tr>
                  <td colspan="2" v-show="showFirstJigouSubmit" @click="addFirstJigou"><span>提交</span></td>
                  <td colspan="2" v-show="showSecondJigouSubmit" @click="addSecondJigou(nowOrgid)"><span>提交</span></td>
                  <td colspan="2" v-show="showmodifyJigouSubmit" @click="modifyFirstJigouSubmit(nowOrgid)"><span>提交</span></td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 查看下级机构 -->
          <div class="cont" v-show="showAddareaMore">
            <div class="btn-group">
              <span class="btn" @click="addSecondJigouClick">增加同级机构</span>
              <span class="btn" @click="goUpperClick">向上</span>
              <span class="text">上级结构：{{nowOrgname}}</span>
            </div>
            <table width="95%">
              <thead>
                <tr>
                  <th>编号</th>
                  <th>名称</th>
                  <th>备注</th>
                  <th width="320px">操作</th>
                </tr>
              </thead>
              <tbody v-if="this.len !== 0">
                <tr v-for="item in jigouSecondList" :key="item.id">
                  <td>{{item.hash.orgid}}</td>
                  <td>{{item.hash.orgname}}</td>
                  <td>备注</td>
                  <td>
                    <span @click="showNextInfo(item.hash.orgid, item.hash.orgname)">查看下级代码</span>
                    <span @click="modifySecondJigouInfo(item.hash.orgid)">修改</span>
                    <span @click.stop="deleteSecondJIgou(item.hash.orgid, nowOrgid)">删除</span>
                  </td>
                </tr>
              </tbody>
              <tbody v-else>
                暂无数据
              </tbody>
            </table>
          </div>
        </div>
        <div v-show="this.change=='代码列表'">
          <div class="cont" v-show="showDaima">
            <div class="btn-group">
              <span class="btn" @click="addNewDaimaClick">增加同级机构</span>
              <span class="text">代码类型
                <select name="" id="" v-model="nowDaimaTypeId">
                  <option v-for="item in daimaTypeList" :key="item.id" :value="item.hash.typeid">
                    {{item.hash.typename}}
                  </option>
                </select>
              </span>
              <span>上级代码:</span>
            </div>
            <table width="95%">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>代码</th>
                  <th>名称</th>
                  <th>备注</th>
                  <th width="320px">操作</th>
                </tr>
              </thead>
              <tbody v-if ="this.listLen !== 0">
                <tr v-for="(item, index) in daimaList" :key="item.id">
                  <td>{{index+1}}</td>
                  <td>{{item.hash.code_id}}</td>
                  <td>{{item.hash.code_name}}</td>
                  <td>备注内容</td>
                  <td>
                    <span @click="showNextDaimaClick(item.hash.code_id)">查看下级代码</span>
                    <span @click="modifyDaimaClick(item.hash.code_id)">修改</span>
                    <span @click="deleteDaimaClick(item.hash.code_id)">删除</span>
                  </td>
                </tr>
              </tbody>
              <tbody v-else>暂无数据</tbody>
            </table>
          </div>
          <div class="addInfo" v-show="showAdddaima">
            <div class="title"><span>代码管理</span>——新增代码</div>
            <table width="95%">
              <tbody>
                <tr>
                  <td>代码类别:</td>
                  <td>{{nowDaimaTypeId}}</td>
                </tr>
                <tr>
                  <td>上级代码:</td>
                  <td><input type="text" :value="nowDaimaId" readonly></td>
                </tr>
                <tr>
                  <td>新增代码:</td>
                  <td><input type="text" v-model="newDaimaId"></td>
                </tr>
                <tr>
                  <td>新增代码名称:</td>
                  <td><input type="text" v-model="newDaimaName"></td>
                </tr>
                <tr>
                  <td>备注:</td>
                  <td><input type="text"></td>
                </tr>
                <tr>
                  <td colspan="2" v-show="showAddDaimaSubmit" @click="addNewDaimaSubmit"><span>提交</span></td>
                  <td colspan="2" v-show="showAddDaimaSubmit1" @click="addNewDaimaSubmit1"><span>提交</span></td>
                  <td colspan="2" v-show="showModifyDaimaSubmit" @click="modifyDaimaSubmit"><span>提交</span></td>
                  <td colspan="2" v-show="showModifyDaimaSubmit1" @click="modifyDaimaSubmit1"><span>提交</span></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="cont" v-show="showAdddaimaMore">
            <div class="btn-group">
              <span class="btn" @click="addNewDaimaClick1">增加同级代码</span>
              <span class="btn" @click="goDaimaUpper">向上</span>
              <span class="text">上级结构：{{nowDaimaId}}</span>
            </div>
            <table width="95%">
              <thead>
                <tr>
                  <th>编号</th>
                  <th>名称</th>
                  <th>备注</th>
                  <th width="320px">操作</th>
                </tr>
              </thead>
              <tbody v-if ="this.listLen1 !== 0">
                <tr v-for="(item, index) in daimaList1" :key="item.id">
                  <td>{{index+1}}</td>
                  <td>{{item.hash.code_name}}</td>
                  <td>我的备注</td>
                  <td>
                    <span @click="showNextDaimaClick(item.hash.code_id)">查看下级代码</span>
                    <span @click="modifyDaimaClick1(item.hash.code_id)">修改</span>
                    <span @click="deleteDaimaClick(item.hash.code_id)">删除</span>
                  </td>
                </tr>
              </tbody>
              <tbody v-else>暂无数据</tbody>
            </table>
          </div>
        </div>
        <div v-show="this.change=='角色列表'">
          <div class="cont" v-show="showRoles">
            <div class="btn-group">
              <span class="btn" @click="addNewRole">添加新角色</span>
            </div>
            <table width="95%">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>名字</th>
                  <th>权限数</th>
                  <th>员工数</th>
                  <th width="320px">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in roleList" :key="item.id">
                  <td>{{index+1}}</td>
                  <td>{{item.hash.rname}}</td>
                  <td>{{item.hash.countf}}</td>
                  <td>{{item.hash.countp}}</td>
                  <td>
                    <span @click="modifyRoleInfoClick(item.hash.rid)">角色修改</span>
                    <span @click.stop="deleteRoleItem(item.hash.rid)">删除</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="addInfo" v-show="showAddNewRole">
            <div class="title"><span @click="goBackRole">角色管理</span>——新增角色</div>
            <table width="95%">
              <tbody>
                <tr>
                  <td width="20%">角色名称:</td>
                  <td><input type="text" v-model="newRoleName"></td>
                </tr>
                <tr>
                  <td :rowspan="rolePermissionList.length+2">权限管理:</td>
                  <tree :rid="nowRoleRid" v-if="isRouterAlive"></tree>
                <tr>

                <!-- <tr v-for="(item, index) in rolePermissionList" :key="item.id">
                  <td style="text-align: left;padding: 5px 15px;">
                    <input type="checkbox" :id="index" :value="item.hash.funcid" v-model="permissionList">
                    <label for="index">{{item.hash.funcname}}</label>
                    <table>
                      <tr v-for="(item, index) in rolePermissionList" :key="item.id">
                        <td style="border: none; height: 25px;">
                          <input type="checkbox" :id="index" :value="item.hash.funcid" v-model="permissionList">
                          <label for="index">{{item.hash.funcname}}</label>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr> -->
                <tr>
                  <td colspan="2" v-show="showAddRoleBtn" @click="addRoleSubmit"><span>提交</span></td>
                  <td colspan="2" v-show="showModifyRoleBtn" @click="modifyRoleSubmit"><span>提交</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import tree from '~/components/common/tree/tree';
import HHeader from '~/components/common/header/Mheader';
import pagination from '~/components/common/pagination/pagination';
import NuxtLink from '../.nuxt/components/nuxt-link';

export default {
  data() {
    return {
      sideMenu: [],
      isRouterAlive: true,
      RoleRids: [],
      change: '用户列表',
      showTitle: '',
      ts: this.newStore(),
      // 分页相关
      group: 1, // 分组
      total: 0, // 数据总数
      num: 1, // 当前页
      limit: '30', // 每组有多少条数据
      // 用户管理相关
      userList: [], // 用户列表
      oneUserInfo: [], // 一条信息
      jigouList: [], // 机构信息
      userRoleList: [], // 用户角色信息
      showUser: true,
      showAdduser: false,
      showUserRole: false,
      checkedRid: [],
      check: '',
      rolerid: '',
      newUserId: '',
      newUserName: '',
      newUserSex: '',
      newUserAge: '',
      newUserJigou: '',
      newUserPosition: '',
      newUserEmail: '',
      newUserTel: '',
      newUserPwd: '',
      nowPid: '', // 用户当前pid
      showSubmit: false, // 显示提交按钮
      showXiugaiSubmit: false, // 显示提交修改按钮
      // 机构管理相关
      jigouFirstList: [], // 一级机构列表
      jigouSecondList: [], // 二级机构列表
      oneJigouInfo: [], // 单条机构信息
      nowOrgname: '', // 点击查看下级代码，保存当前一级结构的名称
      nowOrgid: '',
      oldOrgid: '',
      len: 0,
      // 控制增加修改提交按钮
      showFirstJigouSubmit: false,
      showSecondJigouSubmit: false,
      showmodifyJigouSubmit: false,
      showArea: true,
      showAddarea: false,
      showAddareaMore: false,
      newFirstJigou: '',
      // 代码管理相关
      daimaList: [], // 代码信息列表
      daimaList1: [],
      daimaTypeList: [], // 代码类型列表
      oneDaimaInfo: [], // 单条代码信息
      nowDaimaTypeId: '07', // 当前的代码类型id
      nowDaimaId: '', // 当前代码id
      oldDaimaId: '',
      listLen: 0, // 数据长度
      listLen1: 0,
      newDaimaId: '',
      newDaimaName: '',
      showAddDaimaSubmit: false,
      showAddDaimaSubmit1: false,
      showModifyDaimaSubmit: false,
      showModifyDaimaSubmit1: false,
      showDaima: true,
      showAdddaima: false,
      showAdddaimaMore: false,
      // 角色管理相关
      roleList: [], // 角色列表
      rolePermissionList: [], // 角色权限列表
      permissionList: [], // 添加权限时绑定选择的权限数组
      onePermissInfo: [], // 一条角色信息
      showRoles: true, // 展示角色列表页
      showAddNewRole: false, // 展示增加角色页
      newRoleName: '', // 新角色名称
      nowRoleRid: '', // 点击角色权限修改时保存当前的rid
      showAddRoleBtn: false, // 添加角色时显示提交按钮
      showModifyRoleBtn: false, // 修改角色
    };
  },
  created() {
    this.getSidemenu();
    this.getjigouList();
    this.getSecondJigouList('102');
  },
  computed: {
    // 用户修改
    male() {
      return this.newUserSex == '男';
    },
    female() {
      return this.newUserSex == '女';
    },
    // 计算页数
    pages() {
      const pages = [];
      this.userList.forEach((item, index) => {
        const page = Math.floor(index / 10);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      });
      return pages;
    },
    // 计算总分组
    groups() {
      return Math.ceil(this.total / this.limit);
    },
  },
  watch: {
    // 切换不同的代码类型
    nowDaimaTypeId() {
      this.$nextTick(() => {
        this.getDaimaInfoList('');
      });
    },
  },
  methods: {
    getSidemenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B078C37EB4CBA2359',
        token: localStorage.getItem('token'),
        supid: '200300',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sideMenu = ts.d.data.operation1;
      });
    },
    reloadTree() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    // 切换左侧tab栏
    changetab(tab) {
      this.change = tab;
      if (this.change == '用户列表') {
        this.showTitle = '用户管理';
        this.getUserListAll(1);
        this.getjigouList();
      } else if (this.change == '机构列表') {
        this.showTitle = '机构管理';
        this.gojigouList();
        this.getFirstJigouList();
      } else if (this.change == '代码列表') {
        this.showTitle = '代码管理';
        this.getDaimaTypeList('07');
        this.getDaimaInfoList();
        this.goDaimaList();
      } else {
        this.showTitle = '角色管理';
        this.getRoleList();
        this.getRolePermissionList();
        this.goBackRole();
      }
    },


    // 分页相关
    // 点击页码，根据当前页获取数据
    pageListView(page) {
      this.num = page;
    },
    // 获取分组信息
    groupListView(msg) {
      this.group = msg.curgroup;
      this.num = msg.curpage;
      this.getUserListAll(this.group);
    },


    // 用户管理
    // 点击角色
    changeUserRole(pid) {
      // 获取该条信息
      this.getOneUserInfo(pid);
      this.getUserRoleList(pid);
      // 转到角色选择页
      this.$nextTick(() => {
        this.goShowUserRole();
      });
    },
    submitUserRole(pid, rid) {
      this.$confirm('确认修改?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'info',
          message: '修改成功!',
        });
        const res = {
          handle: '67A5B6FEF17D97DEE5FB3EC2509558B2BF20AB417E7157D029DABAF7F819C4A4',
          token: localStorage.getItem('token'),
          pid,
          rid,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.getUserListAll(this.group);
        });
        this.$nextTick(() => {
          this.goBackUser();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改',
        });
      });
    },
    // 删除
    deleteUserItem(index, pid) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'info',
          message: '删除成功!',
        });
        const res = {
          handle: '67A5B6FEF17D97DEF1D0D23DA4270B634939C64B2C857641',
          token: localStorage.getItem('token'),
          pid,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.userList.splice(index, 1);
          this.getUserListAll(this.group);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 提交新增用户
    addNewUser() {
      const res = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2372E1BF234D80FD9',
        token: localStorage.getItem('token'),
        userid: this.newUserId,
        cardid: 'tt',
        username: this.newUserName,
        sex: this.newUserSex,
        age: this.newUserAge,
        orgid: this.newUserJigou,
        email: this.newUserEmail,
        telephone: this.newUserTel,
        password: this.newUserPwd,
        fax: 'tt',
        position: this.newUserPosition,
      };
      this.spost(this.ts, '/mainservlet', res).then(() => {
        this.getUserListAll(this.group);
      });
      this.$nextTick(() => {
        this.goBackUser();
      });
    },
    // 点击修改用户信息选项
    modifyUserInfo(pid) {
      this.showSubmit = false;
      this.showXiugaiSubmit = true;
      // 渲染单条信息
      this.getOneUserInfo(pid);
      this.$nextTick(() => {
        this.showUser = false;
        this.showUserRole = false;
        this.showAdduser = true;
      });
    },
    // 提交修改用户信息
    modifyUserSubmit(pid) {
      const res = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B240E22335DEB9DA4F',
        token: localStorage.getItem('token'),
        pid,
        username: this.newUserName,
        sex: this.newUserSex,
        age: this.newUserAge,
        orgid: this.newUserJigou,
        email: this.newUserEmail,
        telephone: this.newUserTel,
        password: this.newUserPwd,
        fax: 'tt',
      };
      this.spost(this.ts, '/mainservlet', res).then(() => {
        this.getUserListAll(this.group);
      });
      this.goBackUser();
    },
    // 获取一条用户信息
    getOneUserInfo(pid) {
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2CBB2E6C77A0F5848',
        token: localStorage.getItem('token'),
        pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.oneUserInfo = ts.d.data.operation1;
        console.log(this.oneUserInfo);
        const item = this.oneUserInfo[0].hash;
        this.newUserId = item.userid;
        this.newUserName = item.username;
        this.newUserSex = item.sex;
        this.newUserAge = item.age;
        this.newUserEmail = item.email;
        this.newUserTel = item.telephone;
        this.newUserJigou = item.orgname;
        this.newUserPosition = item.position;
        this.newUserPwd = item.cardid;
        this.nowPid = item.pid;
      });
    },
    // 获取用户列表(无筛选条件)
    getUserListAll(currentGroup) {
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B22FB6B751D0360763',
        token: localStorage.getItem('token'),
        username: '',
        telephone: '',
        dept: '',
        limit: this.limit,
        allrs: '200',
        start: `${currentGroup}`,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.userList = ts.d.data.operation1;
        this.total = ts.d.data.operation2[0].hash.allrs;
      });
    },
    // 获取用户列表(有筛选条件)
    getUserList(currentGroup) {
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B22FB6B751D0360763',
        token: localStorage.getItem('token'),
        username: this.newUserName,
        telephone: this.newUserTel,
        dept: this.newUserJigou,
        limit: this.limit,
        allrs: 200,
        start: `${currentGroup}`,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.userList = ts.d.data.operation1;
        this.total = ts.d.data.operation2[0].hash.allrs;
      });
    },
    // 获取用户页机构下拉列表
    getjigouList() {
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2CBB2E6C77A0F5848',
        token: localStorage.getItem('token'),
        pid: '1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.jigouList = ts.d.data.operation2;
        console.log(this.jigouList);
        this.newUserJigou = (this.jigouList[0].hash.orgname).replace(/;/g, '');
      });
    },
    // 获取用户角色
    getUserRoleList(pid) {
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B29019D3CEB065EB73',
        token: localStorage.getItem('token'),
        pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.userRoleList = ts.d.data.operation1;
        console.log(this.userRoleList);
      });
    },
    // 显示用户页
    goBackUser() {
      this.showAdduser = false;
      this.showUserRole = false;
      this.showUser = true;
    },
    // 显示添加/修改用户页
    goAddUser() {
      this.showUser = false;
      this.showUserRole = false;
      this.showAdduser = true;
      this.showSubmit = true;
      this.showXiugaiSubmit = false;
    },
    // 显示到用户角色页
    goShowUserRole() {
      this.showUser = false;
      this.showUserRole = true;
      this.showAdduser = false;
    },


    // 机构管理
    // 获取一级机构列表数据
    getFirstJigouList() {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD0ECC64278BA7F847',
        token: localStorage.getItem('token'),
        suporg: '1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.jigouFirstList = ts.d.data.operation1;
        this.nowOrgname = '青浦区';
      });
    },
    // 机构首页点击增加同级机构按钮
    addJigouClick() {
      this.showFirstJigouSubmit = true;
      this.showSecondJigouSubmit = false;
      this.showmodifyJigouSubmit = false;
      this.$nextTick(() => {
        this.goAddNewJigou();
      });
    },
    // 增加一级机构
    addFirstJigou() {
      const res = {
        handle: '67A5B6FEF17D97DE8AD68148755261CACC426B34C0BBA8ED',
        token: localStorage.getItem('token'),
        suporgid: '1',
        orgname: this.newFirstJigou,
        remark: '',
      };
      this.spost(this.ts, '/mainservlet', res).then(() => {
        this.getFirstJigouList();
        this.newOrgname = '青浦区';
      });
      this.$nextTick(() => {
        this.gojigouList();
      });
    },
    // 删除一级机构
    deleteAreaItem(orgid) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'primary',
          message: '删除成功!',
        });
        const res = {
          handle: '67A5B6FEF17D97DEF1D0D23DA4270B6399C94A60607326CA',
          token: localStorage.getItem('token'),
          orgid,
          suporgid: '1',
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.getFirstJigouList();
          this.newOrgname = '青浦区';
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 一级机构点击修改
    modifyFirstJigouInfo(orgid) {
      // 渲染单条信息
      this.getOneJigouInfo(orgid);
      this.showFirstJigouSubmit = false;
      this.showSecondJigouSubmit = false;
      this.showmodifyJigouSubmit = true;
      this.nowOrgid = orgid;
      this.nowOrgname = '青浦区';
      this.$nextTick(() => {
        this.showArea = false;
        this.showAddareaMore = false;
        this.showAddarea = true;
      });
    },
    // 下级机构点击修改
    modifySecondJigouInfo(orgid) {
      // 渲染单条信息
      this.getOneJigouInfo(orgid);
      this.showFirstJigouSubmit = false;
      this.showSecondJigouSubmit = false;
      this.showmodifyJigouSubmit = true;
      this.nowOrgid = orgid;
      this.$nextTick(() => {
        this.showArea = false;
        this.showAddareaMore = false;
        this.showAddarea = true;
      });
    },
    // 一级机构提交修改
    modifyFirstJigouSubmit() {
      const res = {
        handle: '67A5B6FEF17D97DE0AB0D17168BEEBCD04453EE0A5CF10A0',
        token: localStorage.getItem('token'),
        orgname: this.newFirstJigou,
        remark: 'suporgid',
        orgid: this.nowOrgid,
        ordernumber: '',
      };
      this.spost(this.ts, '/mainservlet', res).then(() => {
        this.getFirstJigouList();
      });
      this.gojigouList();
    },
    // 点击查看下级代码获取下级机构列表
    showNextInfo(suporg, orgname) {
      this.getSecondJigouList(suporg, orgname);
    },
    getSecondJigouList(suporg) {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD0ECC64278BA7F847',
        token: localStorage.getItem('token'),
        suporg,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.jigouSecondList = ts.d.data.operation1;
        this.len = this.jigouSecondList[0].cols.length;
        this.oldOrgid = ts.d.data.operation2[0].hash.suporgid;
        this.nowOrgname = ts.d.data.operation2[0].hash.orgname;
        this.nowOrgid = ts.d.data.operation2[0].hash.orgid;
      });
      this.$nextTick(() => {
        this.goAddJigouMore();
      });
    },
    // 向上
    goUpperClick() {
      if (!this.oldOrgid) {

      } else {
        this.goUpper();
      }
    },
    goUpper() {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD0ECC64278BA7F847',
        token: localStorage.getItem('token'),
        suporg: this.oldOrgid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.jigouSecondList = ts.d.data.operation1;
        this.len = this.jigouSecondList[0].cols.length;
        this.oldOrgid = ts.d.data.operation2[0].hash.suporgid;
        this.nowOrgname = ts.d.data.operation2[0].hash.orgname;
        // this.nowOrgid = ts.d.data.operation2[0].hash.suporg;
      });
    },
    // 下级机构点击增加同级机构
    addSecondJigouClick() {
      this.showFirstJigouSubmit = false;
      this.showSecondJigouSubmit = true;
      this.showmodifyJigouSubmit = false;
      this.$nextTick(() => {
        this.getFirstJigouList();
      });
    },
    // 增加下级机构
    addSecondJigou(suporgid) {
      const res = {
        handle: '67A5B6FEF17D97DE8AD68148755261CACC426B34C0BBA8ED',
        token: localStorage.getItem('token'),
        suporgid,
        orgname: this.newFirstJigou,
        remark: '',
      };
      this.spost(this.ts, '/mainservlet', res).then(() => {
        this.getSecondJigouList();
      });
      this.$nextTick(() => {
        this.goAddJigouMore();
      });
    },
    // 删除下级机构
    deleteSecondJIgou(orgid, suporgid) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'primary',
          message: '删除成功!',
        });
        const res = {
          handle: '67A5B6FEF17D97DEF1D0D23DA4270B6399C94A60607326CA',
          token: localStorage.getItem('token'),
          orgid,
          suporgid,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.getSecondJigouList();
        });
        this.$nextTick(() => {
          this.goAddJigouMore();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 获取单条机构信息
    getOneJigouInfo(orgid) {
      const req = {
        handle: '67A5B6FEF17D97DE41472B87C055439393B923BD4A7449EE',
        token: localStorage.getItem('token'),
        orgid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.oneJigouInfo = ts.d.data.operation1;
        const item = this.oneJigouInfo[0].hash;
        this.newFirstJigou = item.orgname;
      });
    },
    // 到机构列表页
    gojigouList() {
      this.showAddarea = false;
      this.showAddareaMore = false;
      this.showArea = true;
    },
    // 到新增机构页
    goAddNewJigou() {
      this.showArea = false;
      this.showAddareaMore = false;
      this.showAddarea = true;
    },
    // 到增加下级机构页
    goAddJigouMore() {
      this.showAddarea = false;
      this.showAddareaMore = true;
      this.showArea = false;
    },


    // 代码管理
    // 点击增加同级代码按钮
    addNewDaimaClick() {
      this.showAddDaimaSubmit = true;
      this.showAddDaimaSubmit1 = false;
      this.showModifyDaimaSubmit = false;
      this.showModifyDaimaSubmit1 = false;
      this.goAddDaima();
    },
    addNewDaimaClick1() {
      this.showAddDaimaSubmit = false;
      this.showAddDaimaSubmit1 = true;
      this.showModifyDaimaSubmit = false;
      this.showModifyDaimaSubmit1 = false;
      this.goAddDaima();
    },
    // 首级点击提交新增代码按钮
    addNewDaimaSubmit() {
      this.addNewDaima();
      this.$nextTick(() => {
        this.goDaimaList();
      });
    },
    // 下级点击提交新增代码按钮
    addNewDaimaSubmit1() {
      this.addNewDaima1();
      this.$nextTick(() => {
        this.goDaimaList();
      });
    },
    // 点击删除代码按钮
    deleteDaimaClick(codeId) {
      this.deleteDaima(codeId);
    },
    // 删除代码接口
    deleteDaima(codeId) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'info',
          message: '删除成功!',
        });
        const res = {
          handle: '67A5B6FEF17D97DEF1D0D23DA4270B63AA4B0A8ECC543C36',
          token: localStorage.getItem('token'),
          sup_code_id: '',
          code_id: codeId,
          codetype: this.nowDaimaTypeId,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.getDaimaInfoList();
          // this.getDaimaInfoList1();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 点击修改代码按钮
    modifyDaimaClick(codeId) {
      this.showAddDaimaSubmit = false;
      this.showAddDaimaSubmit1 = false;
      this.showModifyDaimaSubmit = true;
      this.showModifyDaimaSubmit1 = false;
      this.nowCodeId = codeId;
      this.getOneDaimaInfo();
      this.$nextTick(() => {
        this.goAddDaima();
      });
    },
    modifyDaimaClick1(codeId) {
      this.nowCodeId = codeId;
      this.getOneDaimaInfo();
      this.$nextTick(() => {
        this.goAddDaima();
      });
    },
    // 首页点击提交修改代码按钮
    modifyDaimaSubmit() {
      this.showAddDaimaSubmit = false;
      this.showAddDaimaSubmit1 = false;
      this.showModifyDaimaSubmit = false;
      this.showModifyDaimaSubmit1 = true;
      this.modifyDaimaInfo();
      this.goDaimaList();
    },
    // 下级点击修改代码按钮
    modifyDaimaSubmit1() {
      this.modifyDaimaInfo1();
      this.goDaimaList();
    },
    // 修改代码接口
    modifyDaimaInfo() {
      const req = {
        handle: '67A5B6FEF17D97DE0AB0D17168BEEBCD0737D7C4C3E47D60',
        token: localStorage.getItem('token'),
        code_name: this.newDaimaName,
        prop_a: '备注',
        code_id: this.newDaimaId,
        ordernumber: '1',
        codetype: this.nowDaimaTypeId,
        sup_code_id: '',
      };
      this.spost(this.ts, '/mainservlet', req).then(() => {
        this.getDaimaInfoList();
      });
    },
    modifyDaimaInfo1() {
      const req = {
        handle: '67A5B6FEF17D97DE0AB0D17168BEEBCD0737D7C4C3E47D60',
        token: localStorage.getItem('token'),
        code_name: this.newDaimaName,
        prop_a: '备注',
        code_id: this.newDaimaId,
        ordernumber: '1',
        codetype: this.nowDaimaTypeId,
        sup_code_id: this.oldDaimaId,
      };
      this.spost(this.ts, '/mainservlet', req).then(() => {
        this.getDaimaInfoList1();
      });
    },
    // 点击查看下级代码按钮
    showNextDaimaClick(codeId) {
      this.nowDaimaId = codeId;
      this.getDaimaInfoList1();
      this.$nextTick(() => {
        this.goAddNextDaima();
      });
    },
    goDaimaUpper() {
      this.nowDaimaId = this.oldDaimaId;
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD1C1E493C3971E71F',
        token: localStorage.getItem('token'),
        supid: this.oldDaimaId,
        codetype: this.nowDaimaTypeId,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.daimaList1 = ts.d.data.operation1;
        this.listLen1 = this.daimaList1[0].cols.length;
        this.oldDaimaId = ts.d.data.operation2[0].hash.sup_code_id;
      });
    },
    // 获取单条代码信息
    getOneDaimaInfo() {
      const req = {
        handle: '67A5B6FEF17D97DE41472B87C055439329C3784058E2FA6F',
        token: localStorage.getItem('token'),
        code_id: this.nowCodeId,
        codetype: this.nowDaimaTypeId,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.oneDaimaInfo = ts.d.data.operation1;
        const item = this.oneDaimaInfo[0].hash;
        this.newDaimaId = item.code_id;
        this.newDaimaName = item.code_name;
      });
    },
    // 获取代码类型列表
    getDaimaTypeList() {
      const req = {
        handle: '67A5B6FEF17D97DEADDD1AC49C9AAE0F8C5B6C756017CFB3F6486B1D96ED9F7E',
        token: localStorage.getItem('token'),
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.daimaTypeList = ts.d.data.operation1;
      });
    },
    // 新增代码接口
    addNewDaima() {
      const req = {
        handle: '67A5B6FEF17D97DE8AD68148755261CA149212CB3AA81C34',
        token: localStorage.getItem('token'),
        codetype: this.nowDaimaTypeId,
        code_id: this.newDaimaId,
        sup_code_id: '',
        code_name: this.newDaimaName,
        prop_a: '',
        '': 'ordernumber',
      };
      this.spost(this.ts, '/mainservlet', req).then(() => {
        this.getDaimaInfoList();
      });
    },
    addNewDaima1() {
      alert(this.nowDaimaId);
      const req = {
        handle: '67A5B6FEF17D97DE8AD68148755261CA149212CB3AA81C34',
        token: localStorage.getItem('token'),
        codetype: this.nowDaimaTypeId,
        code_id: this.newDaimaId,
        sup_code_id: this.nowDaimaId,
        code_name: this.newDaimaName,
        prop_a: '',
        '': 'ordernumber',
      };
      this.spost(this.ts, '/mainservlet', req).then(() => {
        this.getDaimaInfoList1();
      });
    },
    // 获取代码信息列表
    getDaimaInfoList() {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD1C1E493C3971E71F',
        token: localStorage.getItem('token'),
        supid: '',
        codetype: this.nowDaimaTypeId,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.daimaList = ts.d.data.operation1;
        this.listLen = this.daimaList[0].cols.length;
        this.oldDaimaId = ts.d.data.operation2[0].hash.sup_code_id;
      });
    },
    getDaimaInfoList1() {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD1C1E493C3971E71F',
        token: localStorage.getItem('token'),
        supid: this.nowDaimaId,
        codetype: this.nowDaimaTypeId,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.daimaList1 = ts.d.data.operation1;
        this.listLen1 = this.daimaList1[0].cols.length;
        this.oldDaimaId = ts.d.data.operation2[0].hash.sup_code_id;
      });
    },
    // 到添加代码页
    goAddDaima() {
      this.showDaima = false;
      this.showAdddaimaMore = false;
      this.showAdddaima = true;
    },
    // 到代码列表页
    goDaimaList() {
      this.showAdddaima = false;
      this.showAdddaimaMore = false;
      this.showDaima = true;
    },
    // 下级代码
    goAddNextDaima() {
      this.showAdddaima = false;
      this.showAdddaimaMore = true;
      this.showDaima = false;
    },


    // 角色管理
    // 点击添加角色按钮
    addNewRole() {
      this.showAddRoleBtn = true;
      this.showModifyRoleBtn = false;
      this.newRoleName = '';
      this.$nextTick(() => {
        this.goAddRole();
      });
    },
    // 点击添加角色页提交按钮
    addRoleSubmit() {
      this.addRole();
      this.$nextTick(() => {
        this.goBackRole();
      });
    },
    // 添加角色接口方法
    addRole() {
      const res = {
        handle: '67A5B6FEF17D97DEC3C602ED709680FD3B0374EB2CB78F0B',
        token: localStorage.getItem('token'),
        rname: this.newRoleName,
        funcsubid: this.permissionList,
      };
      this.spost(this.ts, '/mainservlet', res).then(() => {
        this.getRoleList();
      });
    },
    // 点击修改角色按钮
    modifyRoleInfoClick(rid) {
      this.getOnePermissionInfo(rid);
      this.nowRoleRid = rid;
      this.showAddRoleBtn = false;
      this.showModifyRoleBtn = true;
      this.$nextTick(() => {
        this.goAddRole();
      });
      this.reloadTree();
    },
    // 修改角色时点击提交按钮
    modifyRoleSubmit() {
      this.modifyRoleInfo();
      this.$nextTick(() => {
        this.goBackRole();
      });
    },
    // 修改角色接口方法
    modifyRoleInfo() {
      const res = {
        handle: '67A5B6FEF17D97DE35647731BB93A79BC65B80675326A1A5',
        token: localStorage.getItem('token'),
        rid: this.nowRoleRid,
        rname: this.newRoleName,
        funcsubid: this.permissionList,
      };
      this.spost(this.ts, '/mainservlet', res).then(() => {
        this.getRoleList();
      });
    },
    // 删除角色
    deleteRoleItem(rid) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'primary',
          message: '删除成功!',
        });
        const res = {
          handle: '67A5B6FEF17D97DEF1D0D23DA4270B6342F7DECF2A67833C',
          token: localStorage.getItem('token'),
          rid,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.getRoleList();
        });
        this.$nextTick(() => {
          this.goBackRole();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 获取用户角色列表
    getRoleList() {
      const req = {
        handle: '67A5B6FEF17D97DE35647731BB93A79B410BC76858D429A5',
        token: localStorage.getItem('token'),
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.roleList = ts.d.data.operation1;
      });
    },

    // 获取角色权限列表
    getRolePermissionList() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B639EC0CBABE57827',
        token: localStorage.getItem('token'),
        supid: '200000',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.rolePermissionList;
        for (let i = 0; i < ts.d.data.operation1.length; i += 1) {
          this.rolePermissionList;
        }
      });
    },
    // 获取一条角色信息
    getOnePermissionInfo(rid) {
      const req = {
        handle: '67A5B6FEF17D97DE35647731BB93A79B8998619FA4F7E6A9',
        token: localStorage.getItem('token'),
        rid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.onePermissInfo = ts.d.data.operation1;
        console.log(this.onePermissInfo);
        const item = this.onePermissInfo[0].hash;
        this.newRoleName = item.rname;
        console.log(item);
      });
    },
    // 到添加角色页
    goAddRole() {
      this.showRoles = false;
      this.showAddNewRole = true;
    },
    // 返回角色列表页
    goBackRole() {
      this.showRoles = true;
      this.showAddNewRole = false;
    },
  },
  components: {
    NuxtLink,
    HHeader,
    pagination,
    tree,
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  table >>> .el-button--text
    color: #00f
    padding: 0 5px 0 0
    border-radius: 0
    border-right: 1px solid #999
  table >>> .el-message--success
    color: #00f
  // table >>> .el-button--text
  //   border-right: none;
  .show-role >>> .el-button
    padding: 5px 15px
  .show-role >>> .el-button--primary
    background: #69f
    border-color: #69f
  .systemManage
    width: 100%
    .content
      display: flex
      width: 100%
      min-height: 600px
      .sidebar
        flex: 0 0 200px
        width: 200px
        background: #F2F2F2
        border-right: 1px solid #ccc
        .main-title
          flex: 1
          width: 100%
          height: 44px
          line-height: 44px
          border-bottom: 2px solid #fff
          color: #13227A
          font-size: 0
          .iconfont
            display: inline-block
            margin-right: 15px
            font-size: 20px
            text-indent: 1em
          .text
            display: inline-block
            font-weight: 600
        .menu
          display: block
          width: 100%
          text-indent: 2em
          cursor: pointer
          background: #ffffff
          .title
            height: 48px
            line-height: 48px
            border-bottom: 1px solid #ccc
            padding-left: 10px
            &.choosed
              background #ccc
              color #333
      .main-content
        flex: 1
        margin-bottom: 50px
        .search_h
          height: 44px
          line-height: 44px
          padding-left: 20px
          background: #f2f2f2
          border-bottom: 2px solid #fff
          p
            float: left
            font-size: 16px
            a
              color: #69f
            span
              font-size: 14px
              padding-left: 15px
        .search_c
          width: 100%
          padding: 20px
          border-bottom: 1px solid #f1f1f1;
          .billlist
            margin-bottom: 30px
            span
              display: inline-block
              font-size: 14px
              width: 30%
              min-width: 100px
              &:first-child
                padding-left: 20px
              .selectC
                box-sizing: content-box
                width: 190px
                padding: 8px 5px
                border-radius: 2px
                box-shadow: 0 0 5px #ccc
                font-size: 14px
                color: #333
              input
                box-sizing: content-box
                width: 190px
                padding: 7px 5px
                margin-left: 5px
                border-radius: 2px
                border: 1px solid #ccc
                color: #333
          .search
            margin: 0 auto
            width: 80px
            height: 30px
            line-height: 30px
            text-align: center
            font-size: 14px
            background-color: #69f
            color: #fff
            border-radius: 5px
            font-weight: 400
            cursor: pointer
        .cont
          padding-left: 30px
          .btn-group
            margin: 10px 0
            .btn
              display: inline-block
              padding: 10px
              margin-right: 15px
              text-align: center
              font-size: 14px
              background-color: #69f
              color: #fff
              font-weight: 400
              cursor: pointer
            .text
               select
                    min-width: 100px
                    height: 30px
                    border: 1px solid #ccc
          table
            text-align: center
            padding-left: 30px
            cursor: pointer
            border-collapse: collapse
            td, th
              border: 1px solid #ccc
              font-size: 14px
              color: #666
              height: 40px
            thead
              th
                font-weight: 600
                background-color: #F2F2F2
            tbody
              td
                span
                  display: inline-block
                  vertical-align: middle
                  margin: 0 5px
                  padding-right: 5px
                  border-right: 1px solid #999
                  color: blue
                  &:last-child
                    border-right: none
          .pagination-wrapper
            height: 60px
            line-height: 60px
            text-align: center
            .desc
              margin-left: 50px
              display: inline-block
              font-size: 14px
              span
                color: #666
                i
                  padding: 0 3px
                  font-size: 16px
                  color: #25a4bb
        .addInfo
          padding: 0 30px
          .title
            padding: 15px 0
            font-size: 16px
            span
              color: #69f
              cursor: pointer
          table
            padding-left: 30px
            cursor: pointer
            border-collapse: collapse
            tbody
              tr
                td
                  border: 1px solid #ccc
                  font-size: 14px
                  color: #666
                  height: 40px
                  padding: 0 15px
                  &:nth-of-type(odd)
                    text-align: right
                  input:not([type="radio"]):not([type="checkbox"])
                    width: 300px
                    height: 30px
                    border: 1px solid #ccc
                  select
                    width: 200px
                    height: 30px
                    border: 1px solid #ccc
                  label
                    display: inline-block
                    padding: 0 15px 0 5px
                  checkbox
                    display: inline-block
                    vertical-align: top
                &:last-child
                  td
                    text-align: center
                    span
                      padding: 5px 15px
                      font-size: 14px
                      background-color: #69f
                      color: #fff
                      border-radius: 5px
                      font-weight: 400
                      cursor: pointer
        .show-role
          padding: 0 30px
          .title
            padding: 15px 0
            font-size: 16px
            span
              color: #69f
              cursor: pointer
          .list
            margin-bottom: 15px
            span
              margin-right: 15px
</style>
